<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        table tr th,td{
            border: 1px solid black;
            text-align: center;
        }
        table{
            border: 1px;
            cell-padding:0;
            cell-spacing:0;
            width: 80%;
            margin-top: 20px;
        }
        table thead{
            background-color:#b3d7ff ;
        }
    </style>
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/bootstrap.css">

    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap-table1.15.3.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../js/bootstrap-min-4.3.1.js"></script>
    <script src="../js/pintuer.js"></script>
    <script src="../js/initMain.js"></script>
    <script type="text/javascript">
        function initTable(){
            $("#tableInfo").bootstrapTable({
                method:"post",
                contentType:"application/json",
                url:"/dFile/queryDFile.action",
                //设置交替行样式
                striped:true,
                //初始显示页数
                pageNum:1,
                //是否显示分页
                pagination:true,
                //设置是服务端分页还是客户端分页
                sidePagination:"server",
                //页大小
                pageSize:3,
                //分页列表
                pageList: [3,5,6,10],
                //上传到服务器的参数
                queryParams:function (data) {
                    return{
                        //计算页号，当前号
                        pageNum:(data.offset/data.limit)+1,
                        //计算页大小
                        pageSize: data.limit,
                    }
                },
                columns:[
                    {title:"产品编号",field:"PRODUCT_ID",align:"center"},
                    {title:"产品名称",field:"PRODUCT_NAME",align:"center"},
                    {title:"档次级别",field:"PRODUCT_CLASS",align:"center",formatter:function (value,row,index) {
                            if(value=="D001-1"){
                                return  "高档";
                            }else if(value=="D001-2"){
                                return  "中档";
                            }else {
                                return "低档";
                            }
                        }},
                    {title:"I级分类",field:"FIRST_KIND_NAME",align:"center"},
                    {title:"II级分类",field:"SECOND_KIND_NAME",align:"center"},
                    {title:"III级分类",field:"THIRD_KIND_NAME",align:"center"},
                    {title:"产品经理",field:"",align:"center"},
                    {title:"制定设计单",field:"PRODUCT_ID",align:"center",formatter:function (value,row,index) {
                            var btn="<a href='#'  onclick='makeDesign("+JSON.stringify(row)+")'>制定设计单</a>";
                            return btn;
                        }},
                ]

            })
        }
        $(function () {

            initTable();
            //添加工序
            $("#addProcedureBtn").click(function () {
                $("#addDesignModel").modal("show");
            })
            //删除工序
            $("#delProcedureBtn").click(function ()  {
                var length=$(".procedureCheck:checked").length;
                // alert(length);
                if(length<=0){
                    alert("请至少勾选一个进行删除！")
                }else{
                    for(var i=0;i<length;i++){
                        var obj=$(".procedureCheck:checked").get(i).parentNode.parentNode;
                        obj.remove();
                    }
                }
            })
            //预览
            $("#readBtn").click(function () {
                $("#insertProcedureBtn").css("display","inline");
                $("#btnDiv").css("display","none");
                //判断表格的行是否大于一
                if($("#tBody tr").length>0){
                    var costPriceSum=0;
                    $("#bb").text("序号");
                    for(var i=0;i<$("#tBody tr").length;i++){
                        $("#tBody tr").eq(i).children("td").eq(0).text(i+1);
                        //工时数
                        var labourHourAmount=$(".labourHourAmount").eq(i).val();
                        // alert(labourHourAmount);
                        //工时单位成本
                        var costPrice=$(".costPrice").eq(i).val();
                        // alert(costPrice);
                        $("#tBody tr").eq(i).children("td").eq(7).text(labourHourAmount*costPrice);
                        costPriceSum+=labourHourAmount*costPrice;
                    }
                    $("#costPriceSum").text(costPriceSum);
                }else {
                    alert("请至少添加一个工序！");
                }

            })
            //确认添加生产工序设计单
            $("#insertProcedureBtn").click(function () {
                // var data=$("#addProcedureForm").serialize();
                var arr=[];
                var mDesignProcedure=new Object();
                mDesignProcedure.register=$("#register").text();
                mDesignProcedure.productId=$("#productId").text();
                mDesignProcedure.productName=$("#productName").text();
                mDesignProcedure.costPriceSum=$("#costPriceSum").text();
                mDesignProcedure.designer=$("#designer").val();
                mDesignProcedure.registerTime=$("#registerTime").text();
                mDesignProcedure.procedureDescribe=$("#procedureDescribe").val();

                arr.push(mDesignProcedure);
                arr.push(dFileObj.ID);
                // alert(dFileObj.PRODUCT_ID);
                //获取表格中的对象
                for(var i=0;i<$("#tBody tr").length;i++){
                    var tr=$("#tBody tr").get(i);
                    //工序序号
                    var detailsNumber=tr.children[0].innerText;
                    //工序编号
                    var procedureId=tr.children[1].innerText;
                    //工序名称
                    var procedureName=tr.children[2].innerText;
                    //工序描述
                    var procedureDescribe=tr.children[3].innerText;
                    //工时数
                    var labourHourAmount=$(".labourHourAmount").eq(i).val();
                    //工时单位
                    var amountUnit=$(".amountUnit").eq(i).val();
                    // alert(amountUnit);
                    //工时单位成本
                    var costPrice=$(".costPrice").eq(i).val();
                    //工时成本小计
                    var subtotal=tr.children[7].innerText;
                    //登记人
                    var register=$("#register").text();
                    //登记时间
                    var registerTime=$("#registerTime").text();

                    var mDesignProcedureDetails=new Object();
                    mDesignProcedureDetails.detailsNumber=detailsNumber;
                    mDesignProcedureDetails.procedureId=procedureId;
                    mDesignProcedureDetails.procedureName=procedureName;
                    mDesignProcedureDetails.procedureDescribe=procedureDescribe;
                    mDesignProcedureDetails.labourHourAmount=labourHourAmount;
                    mDesignProcedureDetails.amountUnit=amountUnit;
                    mDesignProcedureDetails.costPrice=costPrice;
                    mDesignProcedureDetails.subtotal=subtotal;
                    mDesignProcedureDetails.register=register;
                    mDesignProcedureDetails.registerTime=registerTime;
                    arr.push(mDesignProcedureDetails);
                }

                $.ajax({
                    url:"/mDesignProcedure/addProcedure",
                    method: "post",
                    traditional:true,
                    data : {
                        "data" : JSON.stringify(arr)
                    },
                    dataType:"json",
                    success:function (data) {
                        $("#addModel").modal("hide");
                        $("#tableInfo").bootstrapTable("refresh");
                    }

                })
            })
        })
        var dFileObj;
        //添加工序到表格
        function  makeDesign(dFile) {
            dFileObj=dFile;
            // alert(dFileObj.PRODUCT_ID);
            $("#addModel").modal("show");
            $("#insertProcedureBtn").css("display","none");
            $("#tBody").empty();
            $(".aa").attr("disabled",false);
            // alert(dFile.PRODUCT_ID);
            $("#productId").text(dFile.PRODUCT_ID);
            $("#productName").text(dFile.PRODUCT_NAME);
            //登记人：当前登录用户
            // alert(localStorage.getItem("userName"));
            $("#register").text(localStorage.getItem("userName"));
            var date=new Date();
            $("#registerTime").text(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
        }
        //添加工序
        function addDesign(obj) {
            // alert(obj);

            var tr=obj.parentNode.parentNode;
            var b=false;
            // alert($("#tBody tr").length);
            for(var i=0;i<$("#tBody tr").length;i++){
                // alert($("#tBody tr").eq(i).children("td").eq(1).text());
                if($("#tBody tr").eq(i).children("td").eq(1).text()==tr.children[0].innerText){
                    //表格中已存在：不需要添加

                    b=true;
                }
            }
            if(b==false){
                obj.disabled="disabled";
                var trnew=$("<tr>");
                var td=$("<td>");
                td.html("<input type='checkbox' class='procedureCheck'/>");
                // count++;
                var td1=$("<td>");
                td1.text(tr.children[0].innerText);
                var td2=$("<td>");
                td2.text(tr.children[1].innerHTML);
                var td3=$("<td>");
                td3.text(tr.children[2].innerHTML);
                var td4=$("<td>");
                td4.html("<input style='width: 100px;border: none' class='labourHourAmount'/>");
                var td5=$("<td>");
                // td5.html("<input  style='width: 100px;border: none' class='amountUnit'/>");
                td5.html("<select class='amountUnit'>\n" +
                    "                        <option value='day'>天</option>\n" +
                    "                        <option value='hour'>小时</option>\n" +
                    "                        <option value='minute'>分钟</option>\n" +
                    "                    </select>");
                var td6=$("<td>");
                td6.html("<input  style='width: 100px;border: none' class='costPrice'/>");
                var td7=$("<td>");
                td7.html("<span></span>");
                trnew.append(td);
                trnew.append(td1);
                trnew.append(td2);
                trnew.append(td3);
                trnew.append(td4);
                trnew.append(td5);
                trnew.append(td6);
                trnew.append(td7);
                // alert(tr.children[0].innerText);
                $("#tBody").append(trnew);
            }
        }
    </script>
</head>
<body>
    <div>
        <table id="tableInfo">

        </table>
    </div>
    <div class="modal  fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 90%">
            <div class="modal-content" style="border: 1px solid black;">
                <div class="modal-header">
                    <div class="container">
                        <div class="row">
                            <div class="col-7" style="text-align: right">
                                <h5 class="modal-title" id="info" >
                                    生产工序设计单
                                </h5>
                            </div>

                            <div class="col-5" style="position: absolute;right: 10px">
                                    <div id="btnDiv">

                                        <button class="btn btn-primary" id="addProcedureBtn">添加工序</button>
                                        <button class="btn btn-warning" id="delProcedureBtn">删除工序</button>
                                        <button class="btn btn-primary" id="readBtn">预览</button>
                                    </div>
                                    <button class="btn btn-primary" id="insertProcedureBtn" style="display: none">
                                        确定
                                    </button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px">

                    </button>
                </div>
                <div class="modal-body">
                    <form id="addProcedureForm">
                        <div class="container">
                            <div class="row">
                                <div class="col-2" style="text-align:right">
                                    产品名称：
                                </div>
                                <div class="col-4">
                                    <span id="productName">笔记本</span>
                                </div>
                                <div class="col-2" style="text-align:right">
                                    产品编号：
                                </div>
                                <div class="col-4">
                                    <span id="productId" >20001002192001</span>
                                </div>
                            </div>
                        </div>
                       <br>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-2" style="text-align: right">
                                    <span>设计人：</span>
                                </div>
                                <div class="col-4">
                                     <input class="form-control" style="width: 200px" placeholder="设计人"  name="designer" id="designer"><br>
                                </div>
                                <div class="col-2" style="text-align: right">
                                    <span>工时总成本：</span>
                                </div>
                                <div class="col-4">
                                    <span  name="costPriceSum" id="costPriceSum"></span><br>
                                </div>

                            </div>
                        </div>
                        <table width="800px" style="margin-left: 20px">
                            <thead>
                                <tr>
                                    <th id="bb">点选</th>
                                    <th>工序编号</th>
                                    <th>工序名称</th>
                                    <th>描述</th>
                                    <th>工时数</th>
                                    <th>工时单位</th>
                                    <th>工时单位成本</th>
                                    <th>工时成本小计(元)</th>
                                </tr>
                            </thead>
                            <tbody id="tBody">

                            </tbody>
                        </table><br>
                        <div class="container">
                            <div class="row">
                                <div class="col-2" style="text-align:right">
                                    登记人：
                                </div>
                                <div class="col-4">
                                    <span name="register" id="register"></span>
                                </div>
                                <div class="col-2" style="text-align:right">
                                    登记时间：
                                </div>
                                <div class="col-4">
                                    <span  name="registerTime" id="registerTime"></span>
                                </div>
                            </div>
                        </div><br>
                        <span style="margin-left: 55px">设计要求：</span>
                        <textarea style="width: 550px;margin-left: 150px" class="form-control" id="procedureDescribe">

                        </textarea>

                    </form>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


<!--    添加工序-->
    <div class="modal  fade" id="addDesignModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 60%">
            <div class="modal-content" style="border: 1px solid black;">
                <div class="modal-header">
                    <h5>工序项目</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px">

                    </button>
                </div>
                <div class="modal-body">
                    <table width="500px" >
                        <thead>
                            <tr>
                                <th>工序编号</th>
                                <th>工序名称</th>
                                <th>工序描述</th>
                                <th>添加</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>01</td>
                                <td>组装</td>
                                <td>-</td>
                                <td><button class="btn btn-sm btn-primary aa" onclick="addDesign(this)">添加</button></td>
                            </tr>
                            <tr>
                                <td>02</td>
                                <td>测试</td>
                                <td>-</td>
                                <td><button  class="btn btn-sm btn-primary aa" onclick="addDesign(this)">添加</button></td>
                            </tr>
                            <tr>
                                <td>03</td>
                                <td>包装</td>
                                <td>-</td>
                                <td><button class="btn btn-sm btn-primary aa" onclick="addDesign(this)">添加</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

</html>